<!--  -->
<template>
  <div>
    <div class="header">
      <div class="title">
        {{ themeInfo.theme_name }}
      </div>
      <div class="personInfo">
        姓名：<span>{{ userInfo.per_name }}</span>
      </div>
      <div class="personInfo">
        部门：
        <span>
          {{ userInfo.per_center
          }}{{ userInfo.per_department ? '-' + userInfo.per_department : '' }}
        </span>
      </div>
      <div class="personInfo">
        职务：<span>{{ userInfo.per_duties }}</span>
      </div>
      <div class="personInfo" v-if="userInfo.per_entry_date">
        入职时间：<span>{{ dateFormat(userInfo.per_entry_date) }}</span>
      </div>
    </div>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="" v-for="(v, i) in labels" :key="i">
        <div class="aTitle">
          <i></i>
          <!-- {{v.lc_fraction_type==1?'（必选）':'（非必选）'}} -->
          {{ v.lc_name
          }}{{
            v.lc_option_type === 1 || v.lc_option_max == -1
              ? ''
              : `(最多${v.lc_option_max}项)`
          }}
        </div>
        <template v-if="v.lc_option_type === 2">
          <el-checkbox-group
            v-model="v.result"
            :max="
              v.lc_option_max == -1 ? v.labelModels.length : v.lc_option_max
            "
          >
            <el-checkbox
              v-for="(m, n) in v.labelModels"
              :key="n.label_id"
              :label="m.label_id"
              >{{ m.label_name }}</el-checkbox
            >
          </el-checkbox-group>
        </template>
        <template v-else>
          <el-radio-group v-model="v.result">
            <el-radio
              v-for="(m, n) in v.labelModels"
              :key="n.label_id"
              :label="m.label_id"
              >{{ m.label_name }}</el-radio
            >
          </el-radio-group>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="submitBtn" @click="onSubmit"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  name: 'score',
  data() {
    return {
      themeInfo: {},
      userInfo: {},
      labels: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
    };
  },
  created() {
    this.getTheme();
    this.getUserInfo();
    this.getLabel();
  },
  methods: {
    dateFormat(val) {
      return dayjs(val).format('YYYY-MM-DD');
    },
    async getLabel() {
      const res = await this.$Request({
        url: `/label/list`,
      });
      this.labels = res.body.map((v) => Object.assign(v, { result: [] }));
    },
    async getUserInfo() {
      const res = await this.$Request({
        url: `/personnel/detaile/${this.$route.query.per_id}`,
      });
      this.userInfo = res.body;
    },
    async getTheme() {
      const res = await this.$Request({
        url: `/theme/detail/${this.$route.query.theme_id}`,
      });
      this.themeInfo = res.body;
    },
    async onSubmit() {
      let userId = localStorage.getItem('userId');
      this.labels.forEach((v, i) => {
        if (v.lc_fraction_type == 1 && (!v.result || v.result.length == 0)) {
          let msg = `必选项第${i+1}项未答！！！`;
          this.$message.warning(msg);
          throw new Error(msg);
        }
      });
      let data = this.labels.map((v) => {
        v.lc_option_type == 1 ? (v.result = [v.result]) : '';
        return v;
      });
      function generateUUID() {
        var d = new Date().getTime();
        var uuid = '4xxxyxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
        });
        return uuid;
      }
      console.log(data);
      if (!userId) {
        userId = generateUUID();
        localStorage.setItem('userId', userId);
      }
      const res = await this.$Request({
        method: 'post',
        url: `/user/submit/${this.$route.query.theme_id}/${this.$route.query.per_id}/${userId}`,
        data,
      });
      let ledictHasSumit = JSON.parse(
        localStorage.getItem('ledictHasSumit') || '[]'
      );
      ledictHasSumit.push(
        `${this.$route.query.theme_id}-${
          this.$route.query.per_id
        }-${dayjs().format('YYYY-MM-DD')}`
      );
      localStorage.setItem('ledictHasSumit', JSON.stringify(ledictHasSumit));

      this.$router.replace({
        //核心语句
        path: '/personList', //跳转的路径
        query: {
          theme_id: this.$route.query.theme_id,
        },
      });
      this.$message.success('提交成功');
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form-item__content {
  width: calc(100% - 100px);
  margin: 0 40px !important;
}
.title {
  font-size: 20px;
  font-weight: bold;
  line-height: 2;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 40px;
}
.personInfo {
  font-size: 18px;
  margin-left: 40px;
  text-align: left;
  line-height: 2;
  font-weight: bold;
}
.personInfo span {
  color: rgba(66, 164, 255, 1);
  font-weight: normal;
}
.aTitle {
  text-align: left;
  width: 100%;
  border: 1px solid rgba(222, 227, 231, 1);
  background-color: rgba(241, 249, 255, 1);
  padding-left: 15px;
}
.aTitle i {
  display: inline-block;
  width: 5px;
  height: 40px;
  position: relative;
  top: 8px;
  background-color: rgba(66, 164, 255, 1);
  margin-right: 10px;
}
.el-checkbox,
.el-radio {
  width: 100%;
  text-align: left;
  margin-left: 20px;
  margin-right: 0;
}
.el-radio {
  line-height: 3;
  position: relative;
  //left: -40px;
}
.el-radio-group {
  width: calc(100% - 80px);
}
/deep/.el-checkbox__label,
/deep/.el-radio__label {
  width: calc(100% - 80px);
  display: inline-grid;
  white-space: pre-line;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 2;
}
/deep/.el-radio__label {
  width: 100%;
}
.submitBtn {
  margin: 0 50%;
  transform: translate(-50%, 0);
}
</style>
